<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<meta name="keywords" content="">  
	<meta name="description" content=""> 
	<title>旋转3D导航栏</title>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/demo.css">
	<style type="text/css">
		body{
			margin: 0;
		}
		/******************响应式设计*****************/
		@media only screen and (max-width: 700px){
			.main{
				display: flex;
				width: 320px;
				height: 237px;
				margin: 150px auto;
				perspective: 1000px;
			}
			/*左边选择区域*/
			.tab{
				width: 85px;
				height: 237px;
				background-color: lightblue;
				margin-right: 7px;
			}
			/*右边内容区域*/
			.content{
				position: relative;
				top: 12.1px;
				left: 6px;
				width: 212px;
				height: 212px;
				transform-style: preserve-3d;
				transition: 0.5s;
			}
			.tab1,.tab2,.tab3{
				width: 85px;
				height: 79px;
				color: #fff;
				font-size: 12px;
				font-weight: bold;
				text-align: center;
				line-height: 85px; 
				cursor: pointer;
			}
			.tab1{
				background-color: #06d6a0;
			}
			.tab2{
				background-color: #1b9aaa;
			}
			.tab3{
				background-color: #ef476f;
			}
			.content1,.content2,.content3{
				position: absolute;
				width: 212px;
				height: 212px;
				color: #fff;
				font-size: 12px;
				font-weight: bold;
				text-align: center;
				line-height: 212px; 
			}
			.content1{
				background-color: #00c0a1;
				transform: translateY(-106px) rotateX(90deg);
			}
			.content2{
				background-color: #0f8faa;
				transform: translateZ(106px);
			}
			.content3{
				background-color: #fd596f;
				transform: translateY(106px) rotateX(-90deg);
			}
		}
		
	</style>
</head>
<body>
	<!-------------- bootstrap响应式header ---------------->
	<style type="text/css">
		.container a{
			color: #fff;
		}
		.container a:hover{
			background-color: #fff;
			color: #337ab7;
		}
	</style>
	<header id="header" class="header" style="background-color: #337ab7;">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
					<!-- <span class="sr-only">Toggle navigation</span> -->
					<span class="icon-bar" style="background-color:#fff;"></span>
					<span class="icon-bar" style="background-color:#fff;"></span>
					<span class="icon-bar" style="background-color:#fff;"></span>
				</button>
				<a href="https://runcoderhang.github.io/" title="" class="navbar-brand" ><b>Hang</b></a>
			</div>
			<nav id="bs-navbar" class="collapse navbar-collapse" aria-expanded="false" style="height: 1px;">
				<ul class="nav navbar-nav">
					<li><a href="https://runcoderhang.github.io/" >博客</a></li>
					<li><a href="https://runcoderhang.github.io/2018/05/11/rotate-3D-1.html" >文章</a></li>
					<li><a href="https://github.com/RunCoderHang/some-cases/tree/master/demo-7" >Github</a></li>
				</ul>
			</nav>
		</div>
	</header>

	<!----------------------- 案例内容 ---------------------->
	<div class="main">
		<div class="tab">
			<div id="tab1" class="tab1">TOP</div>
			<div id="tab2" class="tab2">FRONT</div>
			<div id="tab3" class="tab3">BOTTOM</div>
		</div>
		<div id="content" class="content">
			<div class="content1">TOP CONTENT</div>
			<div class="content2">FRONT CONTENT</div>
			<div class="content3">BOTTOM CONTENT</div>
		</div>
	</div>

	<!-- <script type="text/javascript" src="js/jquery-3.2.1.js"></script> -->
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	<!----------------------- Jquery ------------------------
	<script>
		$(".tab1").click(function(){
			$(".content").css("transform","rotateX(-90deg)");
		})
		$(".tab2").click(function(){
			$(".content").css("transform","rotateX(0deg)");
		})
		$(".tab3").click(function(){
			$(".content").css("transform","rotateX(90deg)");
		})
	</script> 
	-->
	<!----------------------- 原生Js ---------------------->
	<script>
		var tab1 = document.getElementsByClassName("tab1")[0];
		var tab2 = document.getElementsByClassName("tab2")[0];
		var tab3 = document.getElementsByClassName("tab3")[0];
		var content = document.getElementsByClassName("content")[0];
		tab1.addEventListener('click', function(){
			content.style.cssText="transform: rotateX(-90deg);";
		});
		tab2.addEventListener('click', function(){
			content.style.cssText="transform: rotateX(0deg);";
		});
		tab3.addEventListener('click', function(){
			content.style.cssText="transform: rotateX(90deg);";
		});
	</script>
</body>
</html>